<template>
	<view class="content">
		<view class="tabTopC">
			<view class="tab"><u-subsection :list="tabList" :current="current" fontSize="16" inactiveColor="#fff" activeColor="#fff" bgColor="#333242" @change='subsectionChange'></u-subsection></view>
			<view class="news">
				<u-notice-bar :text="text1" direction="column" icon="" bgColor="#5b5c6e" color="#fff"></u-notice-bar>
			</view>
		</view>
		<view class="list_box">
			<view class="list" v-for="item,inx in listData" :key="inx" @click="infoClick(item)">
				<view class="avair_time clearfix">
					<view class="img_box">
						<u-avatar :src="src" :size="25"></u-avatar>
						<text>{{item.usdt_address}}</text>
					</view>
					<view class="time_box">{{item.time}}</view>
				</view>
				<text class="list_txt"><text>回购金额</text>{{item.all_money}}USDT</text>
				<text class="list_txt"><text>订单限额</text>{{item.money_low}}-{{item.money_high}}USDT</text>
				<text class="list_txt"><text>结算时间</text>{{item.time_low}}-{{item.time_high}}小时</text>
				<text class="list_txt"><text>结算方式</text>
					<img src="../../../static/dcep_icon.png" alt="" width="20" height="20" v-if="item.refer_name == '数字货币'">
					<img src="../../../static/card_icon.png" alt="" width="20" height="20" v-if="item.refer_name == '银行卡'">
				</text>
				<text class="info_txt">{{item.usdt_remark}}</text>
				<text class="money"><text class="money_icon">¥</text><text class="money_txt">{{item.usdt_price}}</text>/单价</text>
				<view class="list_b_box"><u-button type="primary" class="list_c" text="出售" v-if="current != 1"></u-button></view>
				<view class="progress_box">
					成交单<text>{{item.count_order}}</text> | <text>{{item.money_bili}}%</text>
					<view class="progress">
						<u-line-progress :percentage="item.money_bili" :showText="false" height="4" activeColor="#f28a65"></u-line-progress>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if="false" />
		</view>
		
		
		
		<view class="newsstatus" v-if="current != 0" :class="isLeftRight == 0 ? 'transletleft' : isLeftRight == 1 ? 'lefttranslet' : isLeftRight == 2 ? 'righttranslet' : isLeftRight == 3 ?'transletright' : ''">
			<text class="iconfont icon-arrow_right"  @click="left"></text>
			<text>当前未开启自动匹配订单</text>
			<text class="ordersBtn">我要<br/>接单</text>
			<text class="iconfont icon-to-right-right" @click="right"></text>
		</view>
		<TabBarCenter/>
	</view>
</template>

<script>
	import TabBarCenter from '../../../components/tabbarcenter.vue';
	export default {
		components:{TabBarCenter
		},
		data() {
			return {
				tabList : ['出售USDT', '快捷匹配'],
				current : 0,
				text1: [],
				src:'无头像',
				status: 'loadmore',
				// 抢单横栏默认为4，不动
				isLeftRight:4,
				listData:[]
			}
		},
		onLoad() {
			this.newsFN();
			this.listDataFN(this.current);
		},
		methods: {
			subsectionChange(v){
				console.log(v)
				this.current = v;
				this.listDataFN(this.current)
			},
			infoClick(v){
				console.log(v)
				uni.navigateTo({
				    url:`../../indexinfo/index?pid=${v.pid}`
				});
			},
			left(){
				if(this.isLeftRight == 1 || this.isLeftRight == 2 || this.isLeftRight == 4){
					this.isLeftRight = 0
				}else if(this.isLeftRight == 3){
					this.isLeftRight = 1
				}
				console.log(this.isLeftRight)
			},
			right(){
				if(this.isLeftRight == 1 || this.isLeftRight == 2 || this.isLeftRight == 4){
					this.isLeftRight = 3
				}else if(this.isLeftRight == 0){
					this.isLeftRight = 2
				}
				console.log(this.isLeftRight)
			},
			// 接口
			newsFN(){
				uni.request({
					url:'/index/api/get_scollmessage',
					method:'post',
					data:{},
					success:res=>{
						this.text1 = []
						res.data.info.map((item,inx)=>{
							this.text1.push(item.usdt_address)
						})
					}
				})
			},
			listDataFN(current){
				uni.request({
					url:'/index/api/product_list',
					method:'post',
					data:{type:current},
					success:res=>{
						this.listData = res.data.info;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{height: 100vh;
	background-color: #f1f5f8;
	.tabTopC{
		padding:0 20rpx ;background-color: #535468;
		.tab{padding-top:20rpx;
			.u-subsection{height: 80rpx;}
			/deep/.u-subsection--button__bar{
				background-color: #474654 !important;
			}
		}
		.news{
			// height: 50rpx;
			padding:20rpx 0;
		}
	}
	.list_box{
		padding: 20rpx;
		.list{position: relative;
			margin-bottom:10rpx;background-color: #fff;padding: 20rpx;box-sizing: border-box;border-radius: 10rpx;
			.avair_time{
				display: flex;justify-content: space-between;padding-bottom: 20rpx;
				.img_box{
					display: flex;width: 50rpx;height: 50rpx;
					text{
						padding-right:65rpx;line-height: 26px;padding-left:10rpx;
						background: url('../../../static/safe_icon.png') no-repeat right center;
						background-size: contain;color: #000;font-weight: 400;
					}
				}
				.time_box{text-align: right;flex: 1;line-height: 26px;font-size:24rpx;}
			}
			.list_txt{
				display: block;line-height: 50rpx;color: #000;font-size: 400;font-size: 20rpx;
				text{color: #919191;padding-right: 20rpx;font-size: 18rpx}
				img{
					vertical-align: -10rpx;
				}
			}
			.info_txt{color: #d78b5a;font-size: 20rpx;font-weight: 500;}
			.money{position: absolute;right: 10rpx;top: 90rpx;color: #939393;font-size: 30rpx;
				.money_icon{font-size: 28rpx;color: #000;}
				.money_txt{font-size: 38rpx;color: #000;}
			}
			.list_b_box{
				width:140rpx;height: 60rpx;position: absolute;right: 10rpx;top: 155rpx;
				.list_c{background-color: $btnColor;border: $btnColor solid 1px;}
			}
			.progress_box{position: absolute;right:10rpx;top:237rpx;color: #9b9b9b;
				display: flex;font-size: 20rpx;line-height: 24rpx;font-weight: 400;
				text:nth-child(1){padding:0 10rpx;color: #000;}
				text:nth-child(2){padding:0 10rpx;color: #000;}
				.progress{width: 80rpx;padding-top: 8rpx;}
				
			}
			
		}
		
	}
	.newsstatus{display: flex;justify-content: space-between;align-items: center;margin: 0 20rpx;
		height: 150rpx;background-color: #fff;position: fixed;bottom: 300rpx;left:0;right:0;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		text{
			&:nth-child(1){margin-left: 20rpx;cursor: pointer;}
			&:nth-child(2){align-items:flex-start ;cursor: pointer;}
			&:nth-child(4){margin-right: 20rpx;cursor: pointer;}
			&.ordersBtn{display:block;color: #fff;cursor: pointer;
				width:96rpx;height:96rpx;background: linear-gradient(#60e6b3,#5ec99f);border-radius: 50%;
				text-align: center;font-size: 24rpx;line-height: 30rpx;padding-top: 17rpx;box-sizing: border-box;
				
			}
		}
		&.transletleft{animation: transletleftMove 1s forwards;-webkit-animation: transletleftMove 1s forwards; /* Safari 与 Chrome */}
		&.lefttranslet{animation: lefttransletMove 1s forwards;-webkit-animation: lefttransletMove 1s forwards;}
		&.righttranslet{animation: righttransletMove 1s forwards;-webkit-animation: righttransletMove 1s forwards;}
		&.transletright{animation: transletrightMove 1s forwards;-webkit-animation: transletrightMove 1s forwards;}
	}
}
@keyframes transletleftMove 
{
    from {transform: translate(0);}
    to {transform: translate(-85vw);}
}
@-webkit-keyframes transletleftMove 
{
    from {transform: translate(0);}
    to {transform: translate(-85vw);}
}
@keyframes lefttransletMove 
{
    from {transform: translate(85vw);}
    to {transform: translate(0);}
}
@-webkit-keyframes lefttransletMove 
{
    from {transform: translate(85vw);}
    to {transform: translate(0);}
}
@keyframes righttransletMove 
{
    from {transform: translate(-85vw);}
    to {transform: translate(0);}
}
@-webkit-keyframes righttransletMove 
{
    from {transform: translate(-85vw);}
    to {transform: translate(0);}
}
@keyframes transletrightMove 
{
    from {transform: translate(0);}
    to {transform: translate(85vw);}
}
@-webkit-keyframes transletrightMove 
{
    from {transform: translate(0);}
    to {transform: translate(85vw);}
}
</style>